<template>
	<view>
		<view class="connect">
			<view class="top_margin">
				<view class="top">
					<view class="top_l" :class="step>=0?'active':''" @tap="tgTab('choose')">
						1
					</view>
					<view class="top_line" :class="step>=0?'active':''"></view>
					<view class="top_line" :class="step>=1?'active':''"></view>
					<view class="top_l" :class="step>=1?'active':''">
						2
					</view>
					<view class="top_line" :class="step>=1?'active':''"></view>
					<view class="top_line" :class="step>=2?'active':''"></view> 
					<view class="top_l" :class="step>=2?'active':''">
						3
					</view>
				</view>
				<view class="top_title">
					<view class="top_text" :class="step>=0?'active':''">交出客户</view>
					<view class="top_text" :class="step>=1?'active':''">跟进人员</view>
					<view class="top_text" :class="step>=2?'active':''">接受人员</view>
				</view>
			</view>
			<view class="xpadding"></view>
			<view class="search">
				<view class="search_input">
						<view class="iconfont icon-paiqi"></view>
						<input class="serach_input" confirm-type="search" placeholder="搜索客户姓名 / 电话" placeholder-style="width: 500upx"/>
				</view>
			</view>
			<view class="xpadding"></view>
			<view class="content_li">
				<view class="week" v-if="step==0">
					<view class="content_li_con" v-for="(items , index) in lists" :key="index"  @tap="check(index)">
						<view class="con_li_l"><radio value="" :checked="items.check" /></view>
						<view class="con_li_photo"><image src="../../../static/homeimg/avatar.png"></image></view>
						<view class="con_li_name">{{items.name}}</view>
						<view class="con_li_address">{{items.detail}}</view>
					</view>
				</view>
				<view class="week" v-if="step==1">
					<view class="content_li_con" v-for="(items , index) in nextlist" :key="index">
						<view class="con_li_l"><radio :checked="items.check" @tap="checkNext(index)"/></view>
						<view class="con_li_photo"><image src="../../../static/homeimg/avatar.png"></image></view>
						<view class="con_li_name">{{items.name}}</view>
						<view class="con_li_address">{{items.detail}}</view>
					</view>
				</view>
				<view class="week" v-if="step==2">
					<view class="content_li_con" v-for="(items , index) in lastlist" :key="index">
						<view class="con_li_l"><radio value="" :checked="items.check" @tap="checkLast(index)"/></view>
						<view class="con_li_photo"><image src="../../../static/homeimg/avatar.png"></image></view>
						<view class="con_li_name">{{items.name}}</view>
						<view class="con_li_address">{{items.detail}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="next"  @tap="goChange('choose')" v-if="step==0">
				<view class="next_first">{{clickText[0]}}</view>
		</view>
		<view class="next"  @tap="goChange('choose')" v-if="step==1">
				<view class="next_first">{{clickText[1]}}</view>
		</view>
		<view class="next" v-if="step==2">
				<view class="next_first">{{clickText[2]}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 'choose',
				lists: [
					{name: '章子怡子', check: false, cate: '婚纱摄影', detail: '保利三期三栋一单元507室'},
					{name: '曹操', check: false, cate: '大魏写真', detail: '保利三期三栋一单元507室'},
					{name: '张飞', check: false, cate: '猛男旅拍', detail: '保利三期三栋一单元507室'},
					{name: '赵云', check: false, cate: '五虎上将', detail: '保利三期三栋一单元507室'},
					{name: '周瑜', check: false, cate: '四大金刚', detail: '保利三期三栋一单元507室'},
					{name: '诸葛亮', check: false, cate: '巧借东风', detail: '保利三期三栋一单元507室'},
					{name: '鲁诉', check: false, cate: '脑子很大', detail: '保利三期三栋一单元507室'},
					{name: '马良', check: false, cate: '下笔有神', detail: '保利三期三栋一单元507室'}
				],
				nextlist: [
					{name: '马良', check: false, cate: '婚纱摄影', detail: '保利三期三栋一单元507室'},
					{name: '曹操', check: false, cate: '大魏写真', detail: '保利三期三栋一单元507室'},
					{name: '张飞', check: false, cate: '猛男旅拍', detail: '保利三期三栋一单元507室'},
					{name: '赵云', check: false, cate: '五虎上将', detail: '保利三期三栋一单元507室'},
					{name: '周瑜', check: false, cate: '四大金刚', detail: '保利三期三栋一单元507室'},
					{name: '诸葛亮', check: false, cate: '巧借东风', detail: '保利三期三栋一单元507室'},
					{name: '鲁诉', check: false, cate: '脑子很大', detail: '保利三期三栋一单元507室'},
					{name: '马良', check: false, cate: '下笔有神', detail: '保利三期三栋一单元507室'}
				],
				lastlist: [
					{name: '鲁诉', check: false, cate: '婚纱摄影', detail: '保利三期三栋一单元507室'},
					{name: '曹操', check: false, cate: '大魏写真', detail: '保利三期三栋一单元507室'},
					{name: '张飞', check: false, cate: '猛男旅拍', detail: '保利三期三栋一单元507室'},
					{name: '赵云', check: false, cate: '五虎上将', detail: '保利三期三栋一单元507室'},
					{name: '周瑜', check: false, cate: '四大金刚', detail: '保利三期三栋一单元507室'},
					{name: '诸葛亮', check: false, cate: '巧借东风', detail: '保利三期三栋一单元507室'},
					{name: '鲁诉', check: false, cate: '脑子很大', detail: '保利三期三栋一单元507室'},
					{name: '马良', check: false, cate: '下笔有神', detail: '保利三期三栋一单元507室'}
				],
				clickText: ['下一步','下一步','完成交接'],
				step: 0
			}
		},
		methods: {
			tgTab (index) {
				this.tabIndex = index;
				console.log("1");
			},
			check (index) {
				this.lists[index].check = !this.lists[index].check;
			},
			checkNext (index) {
				this.nextlist[index].check = !this.nextlist[index].check;
			},
			checkLast (index) {
				this.lastlist[index].check = !this.lastlist[index].check;
			},
			goChange() {
				
				console.log(this.step);
				this.step +=1;
				// if (this.index < this.list1.length - 1) {
				// 	this.index += 1
				// 	this.step = 0
				// } else {
				// 	this.index = 0
				// }
			},
			// clickChange(isstep){
			// 	console.log(this.isstep);
			// 	this.step +=1;
			// }
		}
	}
</script>

<style lang="scss">
	page{
		
	}
	.top_margin{
		width: 100%;
		height: 188upx;
		background-color: #ffffff;
		.top{
			width: calc(100% - 260upx);
			margin-left: 130upx;
			margin-right: 130upx;
			display: flex;
			padding-top: 24upx;
			align-items: center;
			.top_l{
				width: 96upx;
				height: 96upx;
				border:1px solid #cccccc;
				line-height: 96upx;
				text-align: center;
				border-radius: 50%;
				color:#cccccc;
				font-size: 48upx;
				&.active{
					color: #1b82d1;
					border:1px solid #1b82d1;
				}
			}
			.top_line{
				width: 47upx;
				height: 4upx;
				background-color: #cccccc;
				&.active{
					background-color: #1b82d1;
				}
			}
		}
		.top_title{
			width: calc(100% - 244upx);
			margin-top: 13upx;
			margin-left: 122upx;
			margin-right: 122upx;
			display: flex;
			font-size: 30upx;
			color: #999999;
			.top_text{
				width: 125upx;
				margin-right: 72upx;
				&.active{
					color: #1b82d1;
				}
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.search{
		width: 100%;
		background-color: #ffffff;
		height: 88upx;
		line-height: 88upx;
		display: flex;
		.search_input{
			margin-left: 32upx;
			margin-top: 14upx;
			height: 60upx;
			width: 688upx;
			border-radius: 10upx;
			background:rgba(240,240,240,1);
			display: flex;
			.iconfont{
				align-self: center;
				margin-left: 21upx;
			}
			input{
				width: 668upx;
				height: 60upx;
				line-height: 60upx;
				color: #666666;
				font-size: 24upx;
				margin-left: 18upx;
				.placeholderClass{
					
				}
			}
		}
	}
	
	.content_li{
		height: 88upx;
		width: 100%;
		background-color: #ffffff;
		.content_li_con{
			margin-left: 33upx;
			margin-right: 22upx;
			width: calc(100% - 55upx);
			border-bottom: 1px solid #f0f0f0;
			height: 86upx;
			display: flex;
			align-items: center;
			.con_li_l{
				margin-left: 13upx;
				width: 44upx;
				height: 44upx;
				line-height: 44upx;
			}
			.con_li_photo{
				width: 66upx;
				height: 66upx;
				border-radius: 50%;
				margin-left: 26upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.con_li_name{
				font-size: 30upx;
				color: #666666;
				margin-left: 22upx;
				width: 125upx;
			}
			.con_li_address{
				margin-left: 17upx;
				color: #999999;
				font-size: 24upx;
			}
		}
	}
	.next{
		position: fixed;
		width: 100%;
		height: 88upx;
		bottom: 0;
		background-color: #1b82d1;
		color: #ffffff;
		line-height: 60upx;
		text-align: center;
		line-height: 88upx;
	}
</style>
